@import './vw';
@import './comment.scss';

* {
  box-sizing: border-box;
}

.container {
  padding: vw(90) vw(29) 0 vw(27);
  color: #8b8b8b;
  font-size: vw(20);
  line-height: vw(30);
  text-indent: vw(40);

  .top {
    margin: vw(42) 0 vw(15);
    font-size: vw(30);
    color: #010101;
    line-height: vw(35);
    text-indent: vw(0);
  }

  .one {
    margin-bottom: vw(10);
    display: flex;
    justify-content: flex-end;

    p {
      line-height: vw(27);
      text-align: center;
      color: #c5c5c5;
      font-size: vw(20);

      img {
        width: vw(21);
        height: vw(19);
      }

      &:nth-of-type(2) {
        margin-left: vw(44);

        >img {
          width: vw(24);
          height: vw(16);
        }
      }
    }
  }

  .time {
    margin-bottom: vw(44);
    display: flex;
    justify-content: flex-end;
    font-size: vw(22);
    color: #c5c5c5;

    >span:nth-of-type(2) {
      margin-left: vw(18);
      color: #b20000;
    }
  }

  .black {
    margin: vw(34) 0;
    color: #000;
  }

  .black2 {
    color: #000;
  }

  .black3 {
    margin: vw(15) 0;
    color: #000;
    text-indent: 0;
  }

  .black4 {
    margin: vw(15) 0;
    text-indent: 0;
  }

  >img:nth-of-type(1) {
    margin-top: vw(15);
    height: vw(270);
    width: vw(580);
  }

  >img:nth-of-type(2) {
    margin-top: vw(15);
    margin-bottom: vw(15);
    height: vw(167);
    width: vw(592);
  }

  >img:nth-of-type(3) {
    margin-top: vw(15);
    height: vw(274);
    width: vw(592);
  }

  >img:nth-of-type(4) {
    margin: vw(10) 0;
    height: vw(170);
    width: vw(583);
  }

  >img:nth-of-type(5) {
    margin: vw(10) 0;
    height: vw(241);
    width: vw(582);
  }

  >img:nth-of-type(6) {
    margin: vw(10) 0;
    height: vw(299);
    width: vw(581);
  }

  >img:nth-of-type(7) {
    margin: vw(10) 0 vw(30);
    height: vw(277);
    width: vw(527);
  }
}

.container2 {
  padding: 0 0 vw(96) 0;

  .first {
    height: vw(118);
    border-top: vw(19) solid #efefef;
    border-bottom: vw(19) solid #efefef;
    display: flex;
    align-items: center;
    color: #727171;

    >p:nth-of-type(1) {
      margin-left: vw(29);
      font-size: vw(21);
      font-weight: bold;
    }

    >p:nth-of-type(2) {
      font-size: vw(18);
    }
  }

  .second {
    margin-bottom: vw(8);
    height: vw(110);
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .left {
      margin-right: vw(55);
      height: vw(72);
      width: vw(72);
      border-radius: 50%;
      border: 1px solid #8b8b8b;
      position: relative;

      img {
        position: absolute;
        top: vw(23);
        left: vw(19);
        width: vw(30);
        height: vw(27);
      }

      &:nth-of-type(2)>img {
        width: vw(34);
        height: vw(32);
        top: vw(18);
        left: vw(18);
      }

      &:nth-of-type(3) {
        margin-right: 0;

        >img {
          top: vw(20);
          left: vw(23);
          width: vw(22);
          height: vw(33);
        }
      }
    }
  }

  .third {
    margin-bottom: vw(50);
    display: flex;
    justify-content: center;
    color: #8b8b8b;
    font-size: vw(20);

    p {
      margin: 0 vw(45);
    }
  }

  .forth {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: vw(193);
    font-size: vw(20);
    width: vw(583);
    border: 1px solid #c9c9c9;
    color: #8b8b8b;

    a{
      margin-right: vw(3);
      color: #b20000;
    }
  }

  button {
    display: block;
    margin: vw(16) auto;
    height: vw(53);
    width: vw(395);
    outline: none;
    border: none;
    background-color: #b20000;
    color: #fff;
    font-size: vw(26);
    line-height: vw(53);
    text-align: center;
  }

  .comment {
    margin: vw(25) vw(34);
    font-size: vw(18);
    color: #727171;

    ins{
      margin: 0 vw(4);
    }
  }

  .comment-frame {
    margin-bottom: vw(12);
    margin-left: vw(34);

    img {
      margin-right: vw(12);
      width: vw(50);
      height: vw(50);
      border-radius: 50%;
    }

    font-size: vw(18);
    color: #444444;
    display: flex;
    align-items: center;

    span {
      margin-left: vw(5);
      color: #b2b2b2;
    }

  }

  .com-time {
    margin-right: vw(50);
    margin-bottom: vw(20);
    font-size: vw(18);
    color: #b2b2b2;
    text-align: end;
  }

  .com-amout {
    margin-right: vw(50);
    margin-bottom: vw(5);
    font-size: vw(19);
    color: #444444;
    display: flex;
    justify-content: flex-end;

    >span {
      transform: rotateZ(90deg);
    }
  }

  .fifth {
    margin: 0 auto;
    height: vw(425);
    width: vw(534);
    background-color: #fafafa;

    .fifth-one {
      padding: vw(19) vw(11) vw(14) vw(21);
      height: vw(120);
      border-bottom: 1px dashed #c9c9c9;
      line-height: vw(25);

      p:nth-child(1) {
        font-size: vw(18);
        color: #444444;
        display: flex;
        align-items: center;

        img {
          margin-right: vw(15);
          height: vw(40);
          width: vw(40);
          border-radius: 50%;
        }
      }

      p:nth-child(2) {
        margin-top: vw(20);
        font-size: vw(18);
        color: #b2b2b2;
        text-align: end;
      }
    }

    .fifth-one:last-of-type {
      border-bottom: none;
    }

    .fifth-two{
      margin-top: vw(20);
      display: flex;
      flex-direction: column;
      align-items: center;

      textarea{
        height: vw(72);
        width: vw(497);
        border: 1px solid #efefef;
      }

      button{
        margin: vw(20);
        width: vw(174);
        height: vw(45);
        font-size: vw(20);
        color: #fff;
        line-height: vw(45);
        letter-spacing: vw(2);
        background-color: #b20000;
        align-self: flex-end;
      }
    }

  }

  .line{
    margin: vw(20) auto;
    height: 0;
    width: 90%;
    border-top: 1px dashed #c9c9c9;
  }

  .comment-ti{
    margin-left: vw(40);
    display: flex;
    justify-content: space-between;

    p:nth-child(1){
      font-size: vw(22);
      color: #444444;
    }
  }

  .last {
    margin: vw(31) auto vw(10);
    height: vw(60);
    width: 87%;
    color: #bbbbbb;
    font-size: vw(22);
    border-top: 1px solid #e6e6e6;
    // visibility: hidden;
    // 设置元素的可见性，hiddle代表元素不可见。虽然元素不可见但是在文档中的位置还占据
  
    p {
      letter-spacing: vw(2);
      line-height: vw(60);
      text-align: center;
    }
  }
}

